<span class="layui-breadcrumb"  lay-separator="/">
  <a href="/">商家后台</a>
  <a><cite>发布商品</cite></a>
</span>
<style>
    .attr .one{width:50px;padding:5px 2px;}
    .attr .two{width:500px;padding:5px 2px;}
</style>
<form class="layui-form mt_2" action="<?=url('goods/edit')?>">
    <div class="layui-form-item">
        <label class="layui-form-label">商品分类</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input"  value="<?php foreach($cat_list as $k=>$v):?><?php if($k != 0):?>-><?php endif;?><?=$v["cat_title"]?><?php endforeach;?>" />
            <input  type="hidden" name="cat_id" value="<?=$v['id']?>"/>
            <div class="layui-btn layui-btn-sm" onclick="edit_cat()">编辑</div>
        </div>
    </div>
    <input  type="hidden" value="<?=$goods_info['id']?>" name="id"/>
    <div class="layui-form-item">
        <label class="layui-form-label">商品标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" value="<?=$goods_info['title']?>"  required lay-verify="required" placeholder="请输入商品标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">成本价</label>
        <div class="layui-input-block">
            <input type="text" name="cost_price" value="<?=$goods_info['cost_price']?>" required lay-verify="required" placeholder="请输入成本价" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">关键词</label>
        <div class="layui-input-block">
            <input type="text" name="keyword" value="<?=$goods_info['keyword']?>" placeholder="请输入关键词" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" value="<?=$goods_info['description']?>" placeholder="请输入描述" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">封面图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="myupimg">
                <i class="layui-icon">&#xe67c;</i>上传单图
            </button>
            <input type="hidden" name="pic" value="<?=$goods_info['pic']?>" />
            <div style="display:inline-block;position:relative;">
                <span style="position:absolute;right:-15px; top:-15px;cursor:pointer;color:#ccc;font-size:24px;display:none;" id="closeimg">x</span>
                <img id="pic" height=50 src="<?=$goods_info['pic']?>" />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">橱窗图</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="multiplepics">
                    <i class="layui-icon">&#xe67c;</i>上传多图
                </button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="multiplepicsshow">
                      <?php foreach($goods_info['pics'] as $k=>$v): ?>
											<div style="display:inline-block;position:relative;margin-right:20px;">
					      		  	  <input type="hidden" name="pics[]" value="<?=$v?>" />
					      			  <span style="position:absolute;right:-15px; top:-15px;cursor:pointer;color:#ccc;font-size:24px;" onclick="closeimg(this)">x</span>
					      			  <img height=100 src="<?=$v?>" />
					      		  </div>
											<?php endforeach;?>
                    </div>
                </blockquote>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">设置规格</label>
        <input type="hidden" value='<?=$goods_info["spec"]?>' id="spec" name="spec"/>
        <div class="layui-input-block">
            <div class="layui-btn layui-btn-xs layui-btn-normal" onclick="addSpec(this)"><i class="layui-icon"></i><cite>添加规格</cite></div>
            <ul class="attr">
                <?php foreach($spec as $k=>$v): ?>
                <li>
                    <input type="text" class="one"  name="attr_name[]" value="<?=$k?>">
                    <input type="text" class="two" value="<?=$v?>"  placeholder="多个值用逗号隔开" name="attr_value[]">
                    <i onclick="remove(this)" class="layui-icon">-</i>
                </li>
                <?php endforeach;?>
            </ul>
            <div class="layui-btn fr layui-btn-sm layui-btn-normal" onclick="create_attr()">生成规格预览</div>
            <div id="attr_view">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <?php foreach($spec as $k=>$v):?>
                        <th><?=$k?></th>
                        <?php endforeach;?>
                        <th>库存</th>
                        <th>价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach($goods_spec_list as $k=>$v):?>
                    <tr>
                        <?php foreach($v['spec'] as $i=>$val):?>
                        <td><?=$val?></td>
                        <?php endforeach;?>
                        <td><input type="text" style='width: 100px'  class='layui-input' name="<?=$v['title']?>_stock[]" value="<?=$v['stock']?>"/></td>
                        <td><input type="text" style='width: 100px'  class='layui-input' name="<?=$v['title']?>_price[]" value="<?=$v['price']?>"/></td>
                    </tr>
                    <?php endforeach;?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-block">
            <script id="container" name="content" type="text/plain"><?=$goods_info['content']?></script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">属性</label>
        <div class="layui-input-block">
            <textarea  name="attr" placeholder="格式: 品牌:耐克; 产地:美国;" class="layui-textarea"><?=$goods_info['attr']?></textarea>
            <div class="layui-form-mid layui-word-aux">冒号隔开属性和值，多个属性以分号隔开</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮费</label>
        <div class="layui-input-block">
            <input type="text" value="<?=$goods_info['postage']?>" name="postage" placeholder="请输入邮费" value="0" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="myform">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    function edit_cat() {
        var o = GetRequest();
        o.url  = '/goods/goodscat';
        window.location.href = createUrl(o);
    }
    layui.use(['form'], function(){
        var $ = layui.$
            ,form = layui.form;
        form.render();
        var ue = UE.getEditor('container');
    });
    /**
     * 添加规格
     * @param e
     */
    function addSpec(e) {
        var contents = `
        <li>
            <input type="text" class="one" name="attr_name[]" value="">
            <input type="text" class="two" placeholder="多个值用逗号隔开" name="attr_value[]">
            <i onclick="remove(this)" class="layui-icon">-</i>
        </li>
        `;
        $(e).next().append(contents);
    }
    function remove(e){
        if($(".attr li").length==1){
            layer.msg('至少需要一个规格');
            return false;
        }
        $(e).parent("li").remove();
    }
    /**
     * 生成规格预览
     */
    function create_attr(){
        var attr_list = {};//规格名称列表
        $("input[name='attr_name[]']").each(function (i,e) {
            attr_list[i] = $(e).val();
        })
        //规格值列表
        var value_list = {};
        $("input[name='attr_value[]']").each(function (i,e) {
            value_list[i] = $(e).val();
        })
        $.ajax({
            url:"<?=url('goodsprice/countattr')?>",
            method:'post',
            dataType:'json',
            data:{attr_list:attr_list,value_list:value_list},
            success:function(rs){
                data =  { //数据
                    "title":"规格预览"
                    ,"attr_list":rs.data.spec
                    ,"attr_value_list":rs.data.arr
                };
                $("#spec").val(JSON.stringify(rs.data.spec));
                layui.use('laytpl', function(){
                    var laytpl = layui.laytpl;
                    var getTpl = attr_script.innerHTML,view = document.getElementById('attr_view');
                    laytpl(getTpl).render(data, function(html){
                        view.innerHTML = html;
                    });
                });
            }
        });

    }

</script>
<script type="text/html" id="attr_script">
    <table class="layui-table">
        <thead>
        <tr>
            {{#  layui.each(d.attr_list, function(index, item){ }}
            <th>{{ index }}</th>
            {{#  }); }}
            <th>库存</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        {{#  layui.each(d.attr_value_list, function(index, item){ }}
        <tr>
            {{# var arr = item.split('_');}}
            {{# layui.each(arr, function(i, e){ }}
            <td>{{ e }}</td>
            {{#  }); }}
            <td><input type="text" style='width: 100px'  class='layui-input' name="{{ item }}_stock[]" value="100"/></td>
            <td><input type="text" style='width: 100px'  class='layui-input' name="{{ item }}_price[]" value="100"/></td>
        </tr>
        {{#  }); }}
        </tbody>
    </table>
</script>
